react decompose#4469
Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
I am requesting changes because there are still test-blocking CSS issues that prevent the task from being fully completed. Functionally and structurally, your decomposition is solid: App is split into Welcome, Header, Article, and Navigation, each in its own folder with its own CSS and export default, and there is no real violation of the “empty lines between components” checklist item. However, the Cypress tests reveal critical style mismatches: in Article.css, the .article selector must explicitly match what Article.spec.jsx checks (e.g. padding-left: 32px and margin-bottom: 78.4px, as indicated by the failing test around line 29), and in Header.css, .header__title must have font-weight: 700; to satisfy Header.spec.jsx (line 29–31 area). These missing or mismatched styles are considered critical because they directly cause test failures and break the requirements defined by the specs.
To fix this, update your CSS so that the exact properties and pixel values expected by the tests are present on the correct selectors, then re-run the test suite (npm test or the Cypress command used in the task) and ensure everything passes. The extra blank line comments you received about App.jsx and Article.jsx are minor and not actually blocking, but you can still adjust spacing if you want to follow the style guide more closely. Once the CSS is aligned with the test expectations and all tests pass, your solution will be in great shape, because the overall structure and component decomposition are already well done.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
| import Article from './components/Article/Article'; | ||
| import './App.css'; | ||
| // Move each BEM block to a separate component (file) and import them here | ||
|
|
There was a problem hiding this comment.
This violates checklist item #1: "[CODE STYLE] - Don't overuse empty lines between components." The extra blank line before function App() matches the "BAD EXAMPLE" pattern with unnecessary spacing around components.
| // Create an Article function returning the HTML of article block | ||
|
|
||
| // Add a default export statement for Article component to use it in the other files | ||
| import React from 'react'; |
There was a problem hiding this comment.
This violates checklist item #1: Don't overuse empty lines between components. There is an extra blank line between the imports and the App component definition that matches the "BAD EXAMPLE" pattern more than the "GOOD EXAMPLE". Consider tightening the spacing so components/imports are grouped without superfluous blank lines.
| <Navigation /> | ||
| </header> | ||
| ); | ||
| } |
There was a problem hiding this comment.
This violates the expectations from Header.spec.jsx: the test on line 29 checks that .header__title has font-weight: '700', but .header__title here has no font-weight defined. Add font-weight: 700; to match the test requirements.
3 participants
(https://.github.io/react_decompose/)